<template>
  <div class="create-post-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="top" label-width="100px" class="schedule-form">
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-divider content-position="left">医生基本信息</el-divider>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="医生姓名" prop="name">
            <el-input v-model="postForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医生角色" prop="role">
            <el-input v-model="postForm.role" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="VeevaCode" prop="veevaCode">
            <el-input v-model="postForm.veevaCode" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="医院" prop="hospital">
            <el-input v-model="postForm.hospital" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="科室" prop="department">
            <el-input v-model="postForm.department" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="职称" prop="rank">
            <el-input v-model="postForm.rank" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="postForm.sex"
              placeholder="请选择性别"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in genderOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="postForm.phone" type="tel" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-divider content-position="left">出发行程信息</el-divider>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="交通方式" prop="tripMode0">
            <el-input v-model="postForm.tripMode0" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="航班号/火车号" prop="tripNo0">
            <el-input v-model="postForm.tripNo0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="出发省份" prop="outProvinceCode0">
            <el-select
              v-model="postForm.outProvinceCode0"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeProvince(postForm.outProvinceCode0, 'leave')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.id"
                :label="item.province_name"
                :value="item.province_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出发城市" prop="outCityCode0">
            <el-select
              v-model="postForm.outCityCode0"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeCity(postForm.outCityCode0, 'leave')"
            >
              <el-option
                v-for="item in cityLeaveOptions"
                :key="item.id"
                :label="item.city_name"
                :value="item.city_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出发站" prop="outStation0">
            <el-input v-model="postForm.outStation0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="到达省份" prop="inProvinceCode0">
            <el-select
              v-model="postForm.inProvinceCode0"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeProvince(postForm.inProvinceCode0, 'arrive')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.id"
                :label="item.province_name"
                :value="item.province_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到达城市" prop="inCityCode0">
            <el-select
              v-model="postForm.inCityCode0"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeCity(postForm.inCityCode0, 'arrive')"
            >
              <el-option
                v-for="item in cityArriveOptions"
                :key="item.id"
                :label="item.city_name"
                :value="item.city_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到达站" prop="inStation0">
            <el-input v-model="postForm.inStation0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="出发时间" prop="outTime0">
            <el-date-picker
              v-model="postForm.outTime0"
              type="datetime"
              placeholder="选择出发时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="抵达时间" prop="inTime0">
            <el-date-picker
              v-model="postForm.inTime0"
              type="datetime"
              placeholder="选择抵达时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="其他备注" prop="remark0">
            <el-input v-model="postForm.remark0" type="textarea" rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-divider content-position="left">返回行程信息</el-divider>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="交通方式" prop="tripMode1">
            <el-input v-model="postForm.tripMode1" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="航班号/火车号" prop="tripNo1">
            <el-input v-model="postForm.tripNo1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="出发省份" prop="outProvinceCode1">
            <el-select
              v-model="postForm.outProvinceCode1"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeProvince(postForm.outProvinceCode1, 'leaveBack')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.id"
                :label="item.province_name"
                :value="item.province_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出发城市" prop="outCityCode1">
            <el-select
              v-model="postForm.outCityCode1"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeCity(postForm.outCityCode1, 'leaveBack')"
            >
              <el-option
                v-for="item in cityLeaveBackOptions"
                :key="item.id"
                :label="item.city_name"
                :value="item.city_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出发站" prop="outStation1">
            <el-input v-model="postForm.outStation1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="到达省份" prop="inProvinceCode1">
            <el-select
              v-model="postForm.inProvinceCode1"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeProvince(postForm.inProvinceCode1, 'arriveBack')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.id"
                :label="item.province_name"
                :value="item.province_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到达城市" prop="inCityCode1">
            <el-select
              v-model="postForm.inCityCode1"
              filterable
              clearable
              placeholder="请选择"
              style="width:100%"
              @change="changeCity(postForm.inCityCode1, 'arriveBack')"
            >
              <el-option
                v-for="item in cityArriveBackOptions"
                :key="item.id"
                :label="item.city_name"
                :value="item.city_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到达站" prop="inStation1">
            <el-input v-model="postForm.inStation1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9" :offset="3">
          <el-form-item label="出发时间" prop="outTime1">
            <el-date-picker
              v-model="postForm.outTime1"
              type="datetime"
              placeholder="选择出发时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="抵达时间" prop="inTime1">
            <el-date-picker
              v-model="postForm.inTime1"
              type="datetime"
              placeholder="选择抵达时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="其他备注" prop="remark1">
            <el-input v-model="postForm.remark1" type="textarea" rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-divider content-position="left">住宿信息</el-divider>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="酒店名称" prop="hotelName">
            <el-input v-model="postForm.hotelName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-form-item label="入住日期" prop="inTime2">
            <el-date-picker
              v-model="postForm.inTime2"
              type="datetime"
              placeholder="选择入住时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="离店日期" prop="outTime2">
            <el-date-picker
              v-model="postForm.outTime2"
              type="datetime"
              placeholder="选择离店时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入住时长" prop="duration">
            <el-input v-model="postForm.duration" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="酒店地址" prop="hotelLocation">
            <el-input v-model="postForm.hotelLocation" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18" :offset="3">
          <el-form-item label="其他备注" prop="remark2">
            <el-input v-model="postForm.remark2" type="textarea" rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt30">
        <el-col :span="18" :offset="3">
          <el-form-item>
            <el-button type="primary" @click="submitForm">提 交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  getProvince,
  getCities
} from '@/api/baseData'
import {
  meetingScheduleShow,
  addMeetingSchedule,
  editMeetingSchedule
} from '@/api/meetings'

const defaultForm = {
  id: undefined,
  name: '',
  role: '',
  veevaCode: '',
  hospital: '',
  department: '',
  rank: '',
  sex: '',
  phone: '',
  tripMode0: '',
  tripNo0: '',
  outProvince0: '',
  outProvinceCode0: '',
  outCity0: '',
  outCityCode0: '',
  outStation0: '',
  inProvince0: '',
  inProvinceCode0: '',
  inCity0: '',
  inCityCode0: '',
  inStation0: '',
  outTime0: '',
  inTime0: '',
  remark0: '',
  tripMode1: '',
  tripNo1: '',
  outProvince1: '',
  outProvinceCode1: '',
  outCity1: '',
  outCityCode1: '',
  outStation1: '',
  inProvince1: '',
  inProvinceCode1: '',
  inCity1: '',
  inCityCode1: '',
  inStation1: '',
  outTime1: '',
  inTime1: '',
  remark1: '',
  hotelName: '',
  inTime2: '',
  outTime2: '',
  duration: '',
  hotelLocation: '',
  remark2: ''
}

export default {
  name: 'MeetingScheduleForm',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      meetingId: '',
      genderOptions: [
        {
          name: '男',
          id: 1
        },
        {
          name: '女',
          id: 0
        }
      ],
      provinceOptions: [],
      cityLeaveOptions: [],
      cityArriveOptions: [],
      cityLeaveBackOptions: [],
      cityArriveBackOptions: [],
      postForm: Object.assign({}, defaultForm),
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        veevaCode: [
          { required: true, message: '请输入VeevaCode', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        outTime0: [
          { required: true, message: '请选择出发时间', trigger: 'blur' }
        ],
        inTime0: [
          { required: true, message: '请选择抵达时间', trigger: 'blur' }
        ],
        outTime1: [
          { required: true, message: '请选择返回时间', trigger: 'blur' }
        ],
        inTime1: [
          { required: true, message: '请选择返回抵达时间', trigger: 'blur' }
        ],
        outTime2: [
          { required: true, message: '请选择入住时间', trigger: 'blur' }
        ],
        inTime2: [
          { required: true, message: '请选择离店时间', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.meetingId = route.params && route.params.id
      },
      immediate: true
    }
  },
  created() {
    this.fetchProvince()
    this.meetingId = this.$route.params && this.$route.params.id
    this.postForm.meetingId = this.$route.params && this.$route.params.id
    if (this.isEdit) {
      const scheduleId = this.$route.params && this.$route.params.scheduleId
      this.fetchData(this.meetingId, scheduleId)
    }
  },
  methods: {
    fetchProvince() {
      getProvince().then(response => {
        // console.log(response)
        this.provinceOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchCities(code, type) {
      getCities({ provinceCode: code }).then(response => {
        // console.log(response)
        if (type === 'leave') {
          this.cityLeaveOptions = response.data
        }
        if (type === 'arrive') {
          this.cityArriveOptions = response.data
        }
        if (type === 'leaveBack') {
          this.cityLeaveBackOptions = response.data
        }
        if (type === 'arriveBack') {
          this.cityArriveBackOptions = response.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    fetchData(meetingId, id) {
      meetingScheduleShow({
        meetingId,
        id
      }).then(response => {
        const { data } = response
        // console.log(data)
        this.postForm.id = data.id
        this.postForm.name = data.name
        this.postForm.role = data.role
        this.postForm.veevaCode = data.veevaCode
        this.postForm.hospital = data.hospital
        this.postForm.department = data.department
        this.postForm.rank = data.rank
        this.postForm.sex = data.sex
        this.postForm.phone = data.phone
        this.postForm.tripMode0 = data.tripMode0
        this.postForm.tripNo0 = data.tripNo0
        this.postForm.outProvince0 = data.outProvince0
        this.postForm.outProvinceCode0 = data.outProvinceCode0
        this.postForm.outCity0 = data.outCity0
        this.postForm.outCityCode0 = data.outCityCode0
        this.postForm.outStation0 = data.outStation0
        this.postForm.inProvince0 = data.inProvince0
        this.postForm.inProvinceCode0 = data.inProvinceCode0
        this.postForm.inCity0 = data.inCity0
        this.postForm.inCityCode0 = data.inCityCode0
        this.postForm.inStation0 = data.inStation0
        this.postForm.outTime0 = data.outTime0
        this.postForm.inTime0 = data.inTime0
        this.postForm.remark0 = data.remark0
        this.postForm.tripMode1 = data.tripMode1
        this.postForm.tripNo1 = data.tripNo1
        this.postForm.outProvince1 = data.outProvince1
        this.postForm.outProvinceCode1 = data.outProvinceCode1
        this.postForm.outCity1 = data.outCity1
        this.postForm.outCityCode1 = data.outCityCode1
        this.postForm.outStation1 = data.outStation1
        this.postForm.inProvince1 = data.inProvince1
        this.postForm.inProvinceCode1 = data.inProvinceCode1
        this.postForm.inCity1 = data.inCity1
        this.postForm.inCityCode1 = data.inCityCode1
        this.postForm.inStation1 = data.inStation1
        this.postForm.outTime1 = data.outTime1
        this.postForm.inTime1 = data.inTime1
        this.postForm.remark1 = data.remark1
        this.postForm.hotelName = data.hotelName
        this.postForm.inTime2 = data.inTime2
        this.postForm.outTime2 = data.outTime2
        this.postForm.duration = data.duration
        this.postForm.hotelLocation = data.hotelLocation
        this.postForm.remark2 = data.remark2

        if (!this._.isEmpty(data.outProvince0) && !this._.isEmpty(data.outProvinceCode0)) {
          this.fetchCities(data.outProvinceCode0, 'leave')
        }
        if (!this._.isEmpty(data.inProvince0) && !this._.isEmpty(data.inProvinceCode0)) {
          this.fetchCities(data.inProvinceCode0, 'arrive')
        }
        if (!this._.isEmpty(data.outProvince1) && !this._.isEmpty(data.outProvinceCode1)) {
          this.fetchCities(data.outProvinceCode1, 'leaveBack')
        }
        if (!this._.isEmpty(data.inProvince1) && !this._.isEmpty(data.inProvinceCode1)) {
          this.fetchCities(data.inProvinceCode1, 'arriveBack')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    changeProvince(province, type) {
      let provinceObj = {}
      if (this._.isEmpty(province)) {
        if (type === 'leave') {
          this.postForm.outProvince0 = ''
          this.postForm.outCity0 = ''
          this.postForm.outCityCode0 = ''
          this.cityLeaveOptions = []
        }
        if (type === 'arrive') {
          this.postForm.inProvince0 = ''
          this.postForm.inCity0 = ''
          this.postForm.inCityCode0 = ''
          this.cityArriveOptions = []
        }
        if (type === 'leaveBack') {
          this.postForm.outProvince1 = ''
          this.postForm.outCity1 = ''
          this.postForm.outCityCode1 = ''
          this.cityLeaveBackOptions = []
        }
        if (type === 'arriveBack') {
          this.postForm.inProvince1 = ''
          this.postForm.inCity1 = ''
          this.postForm.inCityCode1 = ''
          this.cityArriveBackOptions = []
        }
      } else {
        provinceObj = this.provinceOptions.find((item) => {
          return item.province_code === province
        })
        if (type === 'leave') {
          this.postForm.outProvince0 = provinceObj.province_name
          this.postForm.outCity0 = ''
          this.postForm.outCityCode0 = ''
          this.cityLeaveOptions = []
        }
        if (type === 'arrive') {
          this.postForm.inProvince0 = provinceObj.province_name
          this.postForm.inCity0 = ''
          this.postForm.inCityCode0 = ''
          this.cityArriveOptions = []
        }
        if (type === 'leaveBack') {
          this.postForm.outProvince1 = provinceObj.province_name
          this.postForm.outCity1 = ''
          this.postForm.outCityCode1 = ''
          this.cityLeaveBackOptions = []
        }
        if (type === 'arriveBack') {
          this.postForm.inProvince1 = provinceObj.province_name
          this.postForm.inCity1 = ''
          this.postForm.inCityCode1 = ''
          this.cityArriveBackOptions = []
        }
        this.fetchCities(province, type)
      }
    },
    changeCity(city, type) {
      let cityObj = {}
      if (this._.isEmpty(city)) {
        if (type === 'leave') {
          this.postForm.outCity0 = ''
        }
        if (type === 'arrive') {
          this.postForm.inCity0 = ''
        }
        if (type === 'leaveBack') {
          this.postForm.outCity1 = ''
        }
        if (type === 'arriveBack') {
          this.postForm.inCity1 = ''
        }
      } else {
        if (type === 'leave') {
          cityObj = this.cityLeaveOptions.find((item) => {
            return item.city_code === city
          })
          this.postForm.outCity0 = cityObj.city_name
        }
        if (type === 'arrive') {
          cityObj = this.cityArriveOptions.find((item) => {
            return item.city_code === city
          })
          this.postForm.inCity0 = cityObj.city_name
        }
        if (type === 'leaveBack') {
          cityObj = this.cityLeaveBackOptions.find((item) => {
            return item.city_code === city
          })
          this.postForm.outCity1 = cityObj.city_name
        }
        if (type === 'arriveBack') {
          cityObj = this.cityArriveBackOptions.find((item) => {
            return item.city_code === city
          })
          this.postForm.inCity1 = cityObj.city_name
        }
      }
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.isEdit) {
            editMeetingSchedule(this.postForm).then(response => {
              // console.log(response)
              this.$notify({
                title: '成功',
                message: '编辑成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.$router.push(`/meetings/list/${this.meetingId}?type=schedule`)
            }).catch(err => {
              console.log(err)
            })
          } else {
            addMeetingSchedule(this.postForm).then(response => {
              // console.log(response)
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.$router.push(`/meetings/list/${this.meetingId}?type=schedule`)
            }).catch(err => {
              console.log(err)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.postForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.create-post-container {
  position: relative;
}
</style>
